/**
 * 设备详情
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Button, Card, Spin} from 'antd';
import Pc from '../../components/permissionControl';
import {api as deviceApi} from '../../services/device';
import DetailInfo from './detailInfo';
import DeviceMap from './mapInfo';
import DetailTabs from './detailTabs';

require('./detailGrid.less');


const styles = {
  back: {
    marginLeft: '1em'
  },
  bv: {
    textAlign: 'right',
    float: 'right'
  },
  input: {
    marginBottom: '1em',
    display: 'inline-block',
    width: '10em'
  },
  label: {
    fontSize: '14px',
    marginRight: '1em'
  },
  form: {
    fontSize: '14px',
    padding: '1em 0',
    lineHeight: 2
  },
  edit: {
    display: 'inline-block',
    verticalAlign: 'top'
  },
  span: {
    marginLeft: '5em'
  },
  outer: {
    width: '100%',
    minHeight: '470px',
    boxSizing: 'border-box',
    padding: '20px',
  },
  container: {
    width: '100%',
    minHeight: '380px',
    padding: '1px',
    overflow: 'hidden'
  },
  gridStyle: {
    width: '100%',
    textAlign: 'left',
    padding: '1px'
  }
};

class Detail extends Component {

  componentWillMount() {
    this.props.dispatch({
      type: 'device/detail',
      payload: this.props.params.id
    });
  }

  save = () => {
    const {device: {tempDetail, detailData}} = this.props;
    const {error, ...data} = tempDetail;
    for (const k in error) {
      if (error[k]) return;
    }

    // 新加设备安装用户手机号的验证
    const regular = /^1[3|4|5|7|8]\d{9}$/;
    if (data.installUserMobile && !regular.test(data.installUserMobile)) return;

    this.props.dispatch({
      type: 'device/update',
      payload: {
        sno: detailData.sno,
        ...data
      }
    });
  }

  render() {
    const {location, params: {id}} = this.props;
    const rightButton = (
      <div style={styles.bv}>
        <Pc url={deviceApi.update}><Button type="primary" onClick={this.save}>保存</Button></Pc>
        <Button style={styles.back} onClick={() => window.history.back()}>返回列表</Button>
      </div>);

    return (
      <Spin spinning={this.props.loading.effects['device/detail']}>
        <div className="content-inner">
          <div style={styles.outer}>
            <Card title={' '} noHovering={false} bodyStyle={styles.container} extra={rightButton}>
              <Card.Grid noHovering={false} style={styles.gridStyle}><DetailInfo/></Card.Grid>
              {/*<Card.Grid noHovering={false} style={styles.gridStyle}><DeviceMap /></Card.Grid> */}
            </Card>
          </div>
          <DetailTabs location={location} deviceSno={id}/>
        </div>
      </Spin>
    );
  }
}

Detail.propTypes = {};

export default connect(({device, loading}) => ({device, loading}))(Detail);
